<template>
  <div class="search-layout">
    <div class="search-container">
      <a-form ref="searchFromRef" :model="searchForm" autocomplete="off" layout="vertical">
        <!-- :label="l(item?.filterTitle ?? '')" -->
        <!-- 过滤条件 -->
        <a-row :gutter="[12, 12]">
          <a-col v-for="(item, index) in showSearchList" :key="index" :span="item.filterWidth">
            <a-form-item v-if="item.ifShow" :name="item.field">
              <component
                :is="componentType(item)"
                v-model:value="searchForm[item?.field ?? '']"
                v-bind="item.args"
                :placeholder="componentPlaceholder(item.args?.placeholder ?? '')"
                style="width: 100%"
                @change="handleChange($event, item, searchForm[item?.field ?? ''])"
              ></component>
            </a-form-item>
          </a-col>
        </a-row>
        <!-- 高级过滤条件 -->
        <a-row class="mt-12" v-if="hasAdvancedFilter" :gutter="[12, 12]">
          <a-col v-for="(item, index) in hiddenSearchList" :key="index" :span="item.filterWidth">
            <a-form-item v-if="item.ifShow" :name="item.field">
              <component
                :is="componentType(item)"
                v-model:value="searchForm[item?.field ?? '']"
                v-bind="item.args"
                style="width: 100%"
                :placeholder="componentPlaceholder(item.args?.placeholder ?? '')"
                @change="handleChange($event, item, searchForm[item?.field ?? ''])"
              ></component>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="search-aside">
      <a
        class="advanced-button"
        v-if="hiddenSearchList.length > 0"
        @click="handleChangeAdvanceFilter"
      >
        {{ hasAdvancedFilter ? l('Personalized.PackUp') : l('Personalized.Unfold') }}
        <down-outlined :class="hasAdvancedFilter ? 'rotate-no' : 'rotate-yes'" />
      </a>
      <a-button
        type="primary"
        v-if="hiddenSearchList.length || showSearchList.length"
        @click="handleSearchClick"
        :style="{ borderRadius: '4px' }"
      >
        <template #icon>
          <svg class="icon" aria-hidden="true" style="width: 14px; height: 14px; margin-right: 6px">
            <use xlink:href="#gctshuaxin3"></use>
          </svg>
        </template>
        {{ l('Personalized.Search') }}
      </a-button>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import SearchMixin from '../../mixins/search-mixin';
  export default defineComponent({
    name: 'g-dynamic-table-search',
    mixins: [SearchMixin],
  });
</script>
<style lang="less" scoped>
  .mt-12 {
    margin-top: 12px;
  }
  .search-layout {
    display: flex;
    margin-bottom: 24px;
    .search-container {
      flex: 1;
    }

    .search-aside {
      margin-left: 12px;

      .advanced-button {
        margin-right: 16px;
      }
    }
  }
  .ant-form-item {
    margin-bottom: 0;
  }
  .rotate-yes {
    transition: all 0.3s;
  }
  .rotate-no {
    transform: rotate(-180deg);
    transition: all 0.3s;
  }
</style>
